<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 父组件模板 -->
    <div id="app">
        <!-- 监听子组件发射出的事件 -->
        <cpn v-on:itemclick="cpnClick"></cpn>
    </div>

    <!-- 子组件模板 -->
    <template id="cpn">
        <div>
            <button v-for="item in categories" @click="btnClick(item)">
                {{item.name}}
            </button>
        </div>
    </template>

    <script src="../js/vue.js"></script>
    <script>
        //子组件
        const cpn = {
            template: '#cpn',
            data(){
                return {
                    categories: [
                        {id: 'a', name: '热门推荐'},
                        {id: 'b', name: '手机数码'},
                        {id: 'c', name: '家用家电'},
                        {id: 'd', name: '电脑办公'}
                    ]
                }
            },
            methods: {
                btnClick(item){
                    // console.log(item.id)
                    // 给父组件发送数据,一般用于根据用户操作让父组件请求数据
                    // 发射事件,参数为自定义的事件名称以及需要传递给父组件的参数
                    this.$emit('itemclick',item)
                }
            }
        }

        //父组件
        const app = new Vue({
            el: '#app',
            data: {
                info: {
                    name: '苏州大学',
                    age: 120,
                    height: 1.88
                },
                message: '养天地正气,法古今完人'
            },
            components: {
                cpn
            },
            methods: {
                cpnClick(item){
                    console.log(item)
                }
            }
        })
    </script>
</body>
</html>